<template>
    <van-tabs v-model="active" title-active-color="rgb(65, 187, 67)" sticky offset-top="50">
        <van-tab title="全部">
            <List :list="tabList"></List>
        </van-tab>
        <van-tab title="晚餐">
            <List :list="dinner"></List>
        </van-tab>
        <van-tab title="人气">
            <List :list="supper"></List>
        </van-tab>
        <van-tab title="心选">
            <List :list="heart"></List>
        </van-tab>
    </van-tabs>
</template>

<script>
import List from './List.vue';
export default {
    name: "TabListView",
    data() {
        return {
            active: 0,
            tabList: [],
            supper: [],
            dinner: [],
            heart: [],
        };
    },
    async created() {
        let res = await this.$http.getHomeApi();
        this.dinner = res.data.data.list[11].product_list;
        // console.log(this.dinner);
        this.supper = res.data.data.list[10].product_list;
        // console.log(this.supper);
        this.heart = res.data.data.list[9].product_list;
        // console.log(this.heart);
        this.tabList = res.data.data.list[12].product_list;
    },
    components: { List }
}
</script>

<style lang="less" scoped>
// .img{
//     width: 5rem;
//     margin: 0 auto;
// }
// .content{
//     width: 95%;
//     margin: 0 auto;
//     display: flex;
//     flex-wrap: wrap;
//     box-sizing: border-box;
//     padding-top: .3rem;
//     justify-content: space-between;
//     li{
//         display: flex;
//         flex-wrap: wrap;
//         background: #fff;
//         // align-items: center;
//         width: 48%;
//         margin-bottom: .6rem;
//         p{
//             text-align: center;
//             overflow: hidden;
//             text-overflow: ellipsis;
//             word-wrap: break-word;
//             -webkit-line-clamp: 1;
//             line-clamp: 1;
//             display: -webkit-box;
//             -webkit-box-orient: vertical;
//         }
//         .title{
//             font-size: .8rem;
//         }
//         .text{
//             font-size: .8rem; 
//         }
//         .pce{
//             width: 100%;
//             display: flex;
//             align-items: center;
//             justify-content: space-between;
//             div{
//                 span{
//                     font-size: .8rem;
//                 }
//                 .price{
//                     color: rgb(255, 74, 92);
//                 }
//                 .oldPrice{
//                     margin-left: .4rem;
//                     text-decoration: line-through;
//                     color: rgb(166, 161, 161);
//                 }
//             }
//             img{
//                 width: 1.8rem;
//                 height: 1.8rem;
//             }
//         }
        
//     }
// }
</style>